import { notFound } from 'next/navigation';
import Image from 'next/image';
import { getItemById, getItemName, getAllItems } from '@/lib/data'; // Import data loading functions

export default async function ItemDetailPage({ params }: { params: { itemId: string } }) {
  const item = getItemById(params.itemId); // Load item data using the utility function

  if (!item) {
    notFound(); // If item not found, show 404 page
  }

  // Fetch item names asynchronously for build path
  const buildPathNames = item.build_path
    ? await Promise.all(item.build_path.map(subItemId => getItemName(subItemId)))
    : [];

  return (
    <div className="bg-white shadow-lg rounded-lg p-8">
      {/* Item Basic Info */}
      <div className="flex items-center gap-6 mb-8 pb-6 border-b">
        <div className="relative w-20 h-20 rounded border bg-gray-200 flex-shrink-0">
          {/* Placeholder for actual icon */}
          <div className="absolute inset-0 flex items-center justify-center">
            <span className="text-gray-500">图标</span>
          </div>
        </div>
        <div>
          <h1 className="text-3xl font-bold">{item.name}</h1>
          <div className="flex items-center gap-4 mt-2">
            <span className={`px-3 py-1 text-sm rounded ${ item.type === '攻击' ? 'bg-red-100 text-red-800' : item.type === '法术' ? 'bg-purple-100 text-purple-800' : item.type === '防御' ? 'bg-green-100 text-green-800' : item.type === '移动' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800'}`}>
              {item.type}
            </span>
            <span className="text-lg font-semibold text-yellow-600">{item.price} G</span>
          </div>
        </div>
      </div>

      {/* Attributes */}
      <div className="mb-6">
        <h2 className="text-xl font-semibold mb-3">基础属性</h2>
        <ul className="list-disc list-inside space-y-1 text-gray-700">
          {item.attributes.map((attr, index) => (
            <li key={index}>{attr}</li>
          ))}
        </ul>
      </div>

      {/* Effects */}
      <div className="mb-6">
        <h2 className="text-xl font-semibold mb-3">装备效果</h2>
        <div className="space-y-2 text-gray-700">
          {item.passive_effects.map((effect, index) => (
            <p key={index}>{effect}</p>
          ))}
        </div>
      </div>

      {/* Build Path */}
      {item.build_path && item.build_path.length > 0 && (
        <div className="mb-6">
          <h2 className="text-xl font-semibold mb-3">合成路径</h2>
          <div className="flex flex-wrap items-center gap-4">
            {item.build_path.map((subItemId, index) => (
              <div key={subItemId} className="flex items-center gap-2">
                {index > 0 && <span className="text-gray-500">+</span>}
                <div className="flex flex-col items-center w-16">
                  <div className="relative w-12 h-12 rounded border bg-gray-200 mb-1">
                    {/* Placeholder for actual icon */}
                    <div className="absolute inset-0 flex items-center justify-center">
                      <span className="text-xs text-gray-500">图标</span>
                    </div>
                  </div>
                  <span className="text-xs text-center truncate w-full">{buildPathNames[index]}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Builds Into (if needed) */}
      {/* ... */}

    </div>
  );
}

// Add generateStaticParams so Next.js knows which items to generate static pages for
export async function generateStaticParams() {
  const items = getAllItems(); // Load all items to get their IDs
  return items.map(item => ({
    itemId: item.id,
  }));
}
